XML-Driven Drop-Down Menu
         by senocular

Introduction
Virtually every Flash web site ever created has a menu of some sort in it. Most are quite simple, possibly just a row of buttons. Others, however, are more complex, offering not just buttons but also incorporating submenus via drop-down as well. That's what this tutorial will focus on, a drop-down menu. But not any drop-down menu. No. The menu created here will be driven by one (or more) external XML files which, when read into Flash, will determine the makeup and behavior of that menu. Something like the following.

[ menu in Flash defined with XML ]

Deciding on XML
XML (Extensible Markup Language) is a prime candidate for defining drop down menus of this sort because the nature of the organization of XML is defined in the same way as the drop-down menu itself. Both are organized in a hierarchical manner where you have a base collection of items which then can contain further collections of more items or more collections. Consider the following XML snippet. Can you imagine what this might like as a real functioning menu?

<?xml version="1.0"?>
<mainmenu>
<home/>
<portfolio/>
<contact/>
<friends>
<joe/>
<karen/>
<bob/>
</friends>
</mainmenu>

The mainmenu here represents, obviously, the main menu portion of this menu design. Under that XML are the primary menu options. These options include home, portfolio, contact and friends. The friends element (or node) here, however, as you can see, contains more nodes of its own. It has contained within it another menu. This makes friends a submenu of the main menu. The final result would look something like this.

[ working mainmenu example ]

With XML you have, basically, a text version of your menu to define it. This makes it well organized and easy to interpret. But probably more importantly is its potential for customization and ease when changing or updating. By having your Flash menu defined by an external text-based XML file, you can change its options and its behavior easily without ever having to open Flash!

Goals
This tutorial is presented with the following goals:

  1. Create a menu in Flash.
     
  2. Allow for menu items to open up further submenus.
     
  3. Generate the menu based an external XML document.
     
  4. Allow for complete customization of the menu through the XML definition. This includes the options to customize:
     
    1. The layout of the menu.
    2. The names of each individual menu items.
    3. Whether or not a menu item is a simple menu item or if it opens up another submenu.
    4. Actions associated with the pressing of any menu item.
       
  5. Allow for a dynamic restructuring of the menu simply by loading in a new XML definition.

 

   

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.